<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 工作流</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/css/canvas.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/jtopo-0.4.7-min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/jtopo-flow-1.0.0.js"></script>
    <script type="text/javascript">
        var ROOT_PATH = '${pageContext.request.contextPath}';
        var processId='${processId}';
    </script>
</head>
<body class="flow_body">
<!--标题栏-->
<div class="menu">
   <ul class="menu-bar">
       <li><a onclick="saveFlowDef()"><img src="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/image/bc.png"></a><p>保存</p></li>
       <%--<li><a href="#"><img src="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/image/dc.png"></a><p>导出</p></li>
       <li><a href="#"><img src="${pageContext.request.contextPath}/resources/js/workflow/workflowDef/image/hy.png"></a><p>还原</p></li>--%>
   </ul>
</div>
<div class="contain">
    <!--工具栏-->
    <div class="toobar">
        <div class="toobar_title">工具栏</div>
        <ul>
            <li>
                <div class="tool tool_start_1"></div>
                <span>开始</span>
            </li>
            <li>
                <div class="tool tool_formTask_3"></div>
                <span>任务环节</span>
            </li>
            <li>
                <div class="tool tool_toolTask_4"></div>
                <span>自动环节</span>
            </li>
            <li>
                <div class="tool tool_synchronizer_6"></div>
                <span>同步器</span>
            </li>
            <li>
                <div class="tool tool_line_5"></div>
                <span>连接线</span>
            </li>
            <li>
                <div class="tool tool_end_7"></div>
                <span>结束</span>
            </li>
        </ul>
    </div>
    <!--绘图画布-->
    <div class="canvas_car">
        <ul>
            <li id="flow_canvas" class="active">画图</li>
            <li id="flow_code">源代码</li>
        </ul>
    </div>
    <div id="flow_canvas_container" class="canvas">
        <canvas id="canvas"></canvas>

    </div>
    <div id="flow_code_container" class="canvas" style="display: none;">
        <textarea class="canvas_xml" readonly></textarea>
    </div>
    <div class="node_rightMenu">
        <ul>
            <li><a>删除</a></li>
        </ul>
    </div>
    <!--属性区域-->
    <div class="pros">
        <div class="pros_title">属性</div>
        <div class="pros_nodePro">
            <div class="pros_title">节点属性</div>
            <table id="flow_pro_defult"  class="pros_table" style="display: none;">
                <tr>
                    <td class="td_style" style="width:40%;">&nbsp;&nbsp;</td>
                    <td style="width:60%;"><span>&nbsp;&nbsp;</span></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">&nbsp;&nbsp;</td>
                    <td>&nbsp;&nbsp;</td>
                </tr>
            </table>
            <table id="flow_pro_node"  class="pros_table">
                <tr>
                    <td class="td_style">节点id</td>
                    <td><span id="flow_pro_node_name"></span></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">节点名称</td>
                    <td><input id="flow_pro_node_displayName" type="text" value=""/></td>
                </tr>
            </table>
            <table id="flow_pro_formTask"  class="pros_table">
                <tr>
                    <td class="td_style">任务环节id</td>
                    <td><span id="flow_pro_formTask_name"></span></td>
                </tr>
                <tr>
                    <td class="td_style">任务环节名称</td>
                    <td><input id="flow_pro_formTask_displayName" type="text" value=""/></td>
                </tr>
                <tr>
                    <td class="td_style">编辑表单</td>
                    <td><input id="flow_pro_formTask_editForm" type="text" value=""/></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">只读表单</td>
                    <td><input id="flow_pro_formTask_viewForm" type="text" value=""/></td>
                </tr>
            </table>
            <table id="flow_pro_toolTask"  class="pros_table">
                <tr>
                    <td class="td_style">自动环节id</td>
                    <td><span id="flow_pro_toolTask_name"></span></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">自动环节名称</td>
                    <td><input id="flow_pro_toolTask_displayName" type="text" value=""/></td>
                </tr>
            </table>
            <table id="flow_pro_line"  class="pros_table">
                <tr>
                    <td class="td_style">条件id</td>
                    <td><span id="flow_pro_line_name"></span></td>
                </tr>
                <tr>
                    <td class="td_style">条件名称</td>
                    <td><input id="flow_proline_displayName" type="text" value=""/></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">条件</td>
                    <td><input id="flow_proline_conditon" type="text" value=""/></td>
                </tr>
            </table>
        </div>
        <div class="pros_flowPro">
            <div class="pros_title">流程属性</div>
            <table id="flow_pro_0" class="pros_table" style="display:block;width: 100%">
                <tr>
                    <td class="td_style">流程id</td>
                    <td><span id="flow_pro_name"></span></td>
                </tr>
                <tr>
                    <td class="td_style">流程名称</td>
                    <td><input id="flow_pro_displayName" type="text" value=""/></td>
                </tr>
                <tr class="tr_style">
                    <td class="td_style">业务标识</td>
                    <td>
                        <select id="flow_pro_business">
                            <option value="">请选择</option>
                            <c:forEach items="${businessIdentityList}" var="business">
                                <option value="${business.identity}">${business.businessName}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.node_rightMenu').hover(function() {

        }, function() {
            $(this).hide();
        });
        //初始化画布
        if(processId!=null&&processId!=""){
            VFlow.loadCanvas("canvas",processId);
        }else{
            VFlow.initCanvas("canvas");
        }

        //初始化工具栏
        VFlow.initToolbar("tool");
        //流程图与源代码的切换
        $("#flow_canvas").click(function(){
            $("#flow_code_container").hide();
            $("#flow_code").removeClass("active");
            $("#flow_canvas_container").show();
            $("#flow_canvas").addClass("active");
        });
        $("#flow_code").click(function(){
            $("#flow_canvas_container").hide();
            $("#flow_canvas").removeClass("active");
            $("#flow_code_container").show();
            $("#flow_code").addClass("active");
        });
    });
    /***********************************************流程菜单操作*******************************************************************/
    /***
     * 保存流程信息
     */
    function saveFlowDef(){
        VFlow.saveFlowDef();
    }
</script>
</body>
</html>
